<template>
    <div class="newsBody">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-3">
                <div
                    v-for="(item,index) in LeftList"
                    :key="index"
                    class="row"
                    @click="seekUserTalk(index,$event)"
                >
                    <el-avatar
                        shape="square"
                        :size="40"
                        class="col-xs-3 col-sm-3 col-md-3"
                        :src="LeftList[index].src"
                        style="paddingLeft:0;"
                    ></el-avatar>
                    <div class="col-xs-9 col-sm-9 col-md-9">
                        <el-badge
                            v-if="LeftList[index].newsChat"
                            :value="LeftList[index].newsChat"
                            class="item"
                            ref="newsChat"
                        ></el-badge>
                        <div class="leftNameCss">{{LeftList[index].name}}</div>
                        <div
                            class="leftValueCss"
                            v-if="LeftList[index].list"
                        >{{LeftList[index].list[0].value}}</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-8 col-sm-8 col-md-9" v-if="showTalkNews">
                <div>
                    <el-divider>
                        <span style="font-size: 15px;font-weight: 600;">{{LeftList[showIndex].name}}</span>
                    </el-divider>
                </div>
                <div style="height:330px;overflowY: scroll;" ref="scrollHeight">
                    <div v-for="(item,index) in LeftList[showIndex].list" :key="index">
                        <div :class="item.identity =='i'?'iNews':'yNews'">
                            <div>{{item.value}}</div>
                        </div>
                    </div>
                </div>
                <div>
                    <el-input type="textarea" v-model="newsInput" placeholder="请输入内容" :rows="3"></el-input>
                    <div style="right: 30px;position: absolute;">
                        <button class="el-button bgColor">
                            <svg
                                t="1585919533198"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="3492"
                                width="16"
                                height="16"
                            >
                                <path
                                    d="M512.005063 1023.999068A512.1261 512.1261 0 0 1 312.699221 40.247954 512.1261 512.1261 0 0 1 711.300779 983.751115a508.724009 508.724009 0 0 1-199.295716 40.247953z m0-962.670299A450.797332 450.797332 0 0 0 336.594862 927.272351 450.799357 450.799357 0 0 0 687.415264 96.726717a447.820502 447.820502 0 0 0-175.410201-35.397948z"
                                    fill="#1296db"
                                    p-id="3493"
                                />
                                <path
                                    d="M331.400597 329.709211m-58.524068 0a58.524068 58.524068 0 1 0 117.048137 0 58.524068 58.524068 0 1 0-117.048137 0Z"
                                    fill="#1296db"
                                    p-id="3494"
                                />
                                <path
                                    d="M691.921009 329.709211m-58.524068 0a58.524068 58.524068 0 1 0 117.048137 0 58.524068 58.524068 0 1 0-117.048137 0Z"
                                    fill="#1296db"
                                    p-id="3495"
                                />
                                <path
                                    d="M512.065814 880.979611a369.086392 369.086392 0 0 1-369.359774-369.359774 32.400868 32.400868 0 0 1 64.801737 0 304.558037 304.558037 0 0 0 609.116075 0 32.400868 32.400868 0 0 1 64.801736 0 369.066141 369.066141 0 0 1-369.359774 369.359774z"
                                    fill="#1296db"
                                    p-id="3496"
                                />
                            </svg>
                        </button>
                        <el-button icon="el-icon-picture-outline" class="bgColor"></el-button>
                        <el-button type="primary" plain class="bgColor" @click="addList">发送</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    inject: ["reload"],

    data() {
        return {
            newsInput: null,
            showTalkNews: false,
            showIndex: 0,
            LeftList: [
                {
                    name: "易启游小助手",
                    src: require("../../../static/images/gl_2.jpg"),
                    newsChat: 1,
                    list: [
                        {
                            identity: "y",
                            value: `欢迎你，${this.$global.user}! 祝您在这里可以认识更多志同道合的新朋友，收获更多旅途中的乐趣`
                        }
                    ]
                }
            ]
        };
    },
    methods: {
        addList() {
            if (this.LeftList[this.showIndex].list == false) {
                this.LeftList[this.showIndex].list = [];
            }
            this.LeftList[this.showIndex].list.push({
                identity: "i",
                value: this.newsInput
            });
            this.newsInput = "";
            this.$nextTick(() => {
                this.$refs.scrollHeight.scrollTop = this.$refs.scrollHeight.scrollHeight;
            });
        },
        seekUserTalk(index, e) {
            this.showTalkNews = true;
            this.showIndex = index;
            if (this.LeftList[index].newsChat) {
                e.currentTarget.getElementsByClassName(
                    "el-badge item"
                )[0].style.display = "none";
                this.$global.updataNewMes("");
                this.reload();
            }
        }
    },
    mounted() {
        if (this.$route.query.name) {
            this.LeftList.push({
                name: this.$route.query.name,
                src: this.$route.query.src,
                newsChat: false,
                list: false
            });
            this.showIndex = this.LeftList.length - 1;
            this.showTalkNews = true;
        }
    }
};
</script>
<style>
div.newsBody {
    /* margin: 10px 130px; */
    margin: 10px 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background-color: #fff;
}

/* 右边栏 */
div.newsBody > div.row > div:first-child {
    margin-left: 15px;
    margin-right: -15px;
    height: 500px;
    overflow-y: scroll;
    padding-top: 10px;
}
div.newsBody > div.row > div:first-child > div {
    margin: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.445);
    padding: 10px 0;
}

/* input */
div.newsBody textarea.el-textarea__inner {
    border: 0;
    border-top: 1px solid rgba(220, 220, 220, 0.616);
}

/* button */
div.newsBody button.bgColor {
    border: 0;
    font-size: 1.15em;
    color: rgb(64, 158, 255);
}

/* userNews */
div.newsBody div.yNews {
    display: flex;
}
div.newsBody div.yNews > div {
    background-color: #f6f6f6;
    padding: 10px;
    border-radius: 5px;
    margin: 10px;
    overflow-wrap: break-word;
    width: 100%;
    max-width: 60%;
}

div.newsBody div.iNews {
    display: flex;
    justify-content: flex-end;
}
div.newsBody div.iNews > div {
    background-color: rgba(64, 160, 255, 0.699);
    padding: 10px;
    border-radius: 5px;
    margin: 10px;
    overflow-wrap: break-word;
    max-width: 60%;
}

/* left */
div.newsBody div.leftNameCss {
    font-weight: 500;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
div.newsBody div.leftValueCss {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #999;
    width: 120%;
}
@media (min-width: 1000px) {
    div.newsBody {
        margin: 10px 130px;
    }
}

/* item */
div.newsBody div.item {
    position: absolute;
    left: -15px;
}
</style>